<template>
  <div id='app'>
    <h1 v-html="friendData.name" align='center'></h1>
    <div ref="txt" class="txtC">
      <div v-for="(item, i) in list" :key="i">
        <div v-if="item.id == friendData.id" v-html="item.info">
        </div>
      </div>
    </div>
    <div class="send-div">
      <textarea rows="5" @keydown.enter="areasend" cols="15" v-model="msg" style="width:50%;height:60px">
      </textarea>
      <el-button type="success" plain class="btn"  @click="send">发送</el-button>
    </div>
  </div>
</template>
<script>

export default {
  name: 'chat',
  props: {
    friendData: {
      type: Object,
      default() {
        return {}
      }
    },
    list: {
      type: Array,
      default() {
        return {}
      }
    },
    stompClient: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  created() {
  },
  mounted() {

  },
  beforeDestroy() {

  },
  data() {
    return {
      serverUrl: 'http://121.5.221.199:8080/websocket',
      msg: '',
      arrMessages: [],
      info: {
        id: null,
        name: ''
      }
    }
  },
  methods: {
    areasend(e) {
      if (e.preventDefault) e.preventDefault();
      else window.event.value = false;
      this.send()
    },
    send() {
      for (var i = 0; i < this.list.length; ++i) {
        if (this.list[i].id == this.friendData.id) {
          let time = new Date()
          this.list[i].info += `<div  style="float:right;margin:3px 0; clear:both" class="sentUser"><div>${time}</div><div class="sendImg"> <span class="chatcontent">${this.msg} </span>  <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="height:30px" class="chaticon" /> </div>   </div>`
          this.list[i].time = time
          this.$set(this.list, i, this.list[i])
          break
        }
      }


      var than = this
      if (this.stompClient == null) {
        than.$message.error('null')
      }
      this.stompClient.send(
        '/app/chat',
        JSON.stringify({ 'toId': than.friendData.id, 'message': than.msg }),
        { 'token': sessionStorage.getItem('token') },
        function (error) {
          console.log("error", error);
          than.$message.error('发送失败')
        },
      )
      console.log(this.list)
      this.$nextTick(() => {
        console.log(this.$refs.txt.scrollHeight);
        this.$refs.txt.scrollTop = this.$refs.txt.scrollHeight
      })
      this.msg = ''
    }
  }
}
</script>
<style lang="less" scope>
#app {
  background-color: white;
  height: 100%;
  width: 100%;
}
.send-div {
  /* position: fixed; */
  /* bottom: 10px; */
  width: 100%;
  display: flex;
  /* margin: 10px; */
}
.btn {
  width: 10%;
  height: 60px;
  /* float:right; */
  /* margin-top: -999px;
    margin-bottom: -99px; */
}
.txtC {
  background-color: #f5f5f5;
  height: 70%;
  width: 100%;
  padding: 10px;
  overflow: auto;
}

.chaticon {
  border-radius: 50%;
}
.sentUser {
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  .sendImg {
    margin-top: 8px;
    display: flex;
    align-items: center;
    .chatcontent {
      border: 1px solid #fff;
      background: #67c23a;
      margin-left: 4px;

      border-radius: 3px;
      padding: 3px 6px;
    }
  }
}
</style>